import React from 'react';
import { useDpSchema, useProps } from "@ray-js/panel-sdk";
import { Switch, Text, View } from '@ray-js/ray';
import { NavBar, Button } from '@ray-js/smart-ui';
import { IconFont } from '@/components/icon-font';
import styles from './index.module.less';
//import { IconName } from "react-icons/bs";

export function Home() {
  // const actions = useActions();
   // 项目启动时，会自动拉取 IoT 平台 productId 对应的产品 schema 信息
  const dpSchema = useDpSchema();
  console.log("dpSchema", dpSchema); // 打印查看 dpSchema 内容

  // 从设备模型中读取 dpState 数据
  const dpState = useProps(state => state); // 获取所有dpState
  console.log("dpState", dpState); // 打印查看 dpState 内容
  console.log(typeof dpState);
  let firstBtn = 'Close'
  //if (dpState.work_state === "opened") {
  //    firstBtn = 'Open'
  //}

  //const dpSwitch = useProps(state => state.status); // 获取dpCode为switch的值
  //console.log("dpSwitch", dpSwitch); // 打印查看 dpSwitch 内容

  return (
    <>
      <NavBar leftText="Chicken Coop Door" leftTextType="home" />
      <View className={styles.view}>
        <View
          className={styles.content}
          onClick={() => {
            // actions.switch_1.toggle();
          }}
        >
          <View className={styles['space-first']} style={{ marginTop: '0.3rem' }}>
            <View className={styles['space-first-left']} >
              <Text className={styles['space-first-left-title']}>Close or Open</Text>
              <Text className={styles['space-first-btn']} >OPNE</Text>       
            </View>

            <View className={styles['space-first-right']} >
               <Text className={styles['space-first-right-title']}>Fault Alarm</Text>
               <Text className={styles['space-first-tip']}>------</Text>
            </View>
          </View>



          <View className={styles['space-around']} style={{ marginTop: '0.3rem' }}>
            <View className={styles['space-around-left']} ><Text>Current Time</Text></View>
            <View className={styles['space-around-center']} ><Text>20:00</Text></View>
            <View className={styles['space-around-right']} ><IconFont icon="clock"  style={{ fontSize:'0.8rem'}} /></View>
          </View>

          <View className={styles['space-around']} style={{ marginTop: '0.3rem' }}>
            <View className={styles['space-around-left']} ><Text>Current Light Value</Text></View>
            <View className={styles['space-around-center']} ><Text>1%</Text></View>
            <View className={styles['space-around-right']} ><IconFont icon="sun"  style={{ fontSize:'0.8rem'}} /></View>
          </View>

          <View className={styles['space-around']} style={{ marginTop: '0.3rem' }}>
            <View className={styles['space-around-left']} ><Text>Remaining   Power</Text></View>
            <View className={styles['space-around-center']} ><Text>100%</Text></View>
            <View className={styles['space-around-right']} >
            <IconFont icon="angleBattery"  style={{ fontSize:'0.8rem'}} />

            </View>
          </View>

          <View className={styles['space-around']} style={{ marginTop: '0.3rem' }}>
            <View className={styles['space-around-left']} ><Text>Working   Mode</Text></View>
            <View className={styles['space-around-center']} ><Text>T - T</Text></View>
            <View className={styles['space-around-right']} ><IconFont icon="angleRight" style={{ fontSize: '0.8rem'}} /></View>
          </View>
          

          <View className={styles['space-around']} style={{ marginTop: '0.3rem' }}>
            <View className={styles['space-around-left']} >
              <View className={styles['space-around-text']} >
                <Text>Close</Text>
              </View>
               <View className={styles['space-around-data']} >
                  <IconFont icon="clock"  style={{ fontSize:'0.5rem'}} />
                  <Text>20:00</Text>
               </View>
              </View>
            <View className={styles['space-around-center']} ></View>
            <View className={styles['space-around-right']} >
              <View className={styles['space-around-text']} >
                <Text>Open</Text>
              </View>
              <View className={styles['space-around-data']} >
                  <IconFont icon="clock"  style={{ fontSize:'0.5rem'}} />
                  <Text>20:00</Text>
               </View>
              </View>
          </View>

          <View className={styles['space-around']} style={{ marginTop: '0.3rem' }}>
            <View className={styles['space-around-left']} ><Text>Manual switch</Text></View>
            <View className={styles['space-around-center']} ></View>
            <View className={styles['space-around-right']} ><Switch/></View>
          </View>

        </View>
      </View>
    </>
  );
}

export default Home;
